<template>
	<view>
		<view class="traceNav">
			<view class="navItem hasZd">
				<text class="iconfont icon-shoucangon"></text>
				<text>{{statusOne == '' ? '加载中...' : statusOne}}</text>
			</view>
			<view class="navItem beingZd">
				<text class="iconfont icon-shoucangon"></text>
				<text>{{statusTwo == '' ? '加载中...' : statusTwo}}</text>
			</view>
			<view class="navItem noZd">
				<text class="iconfont icon-shoucangon"></text>
				<text>{{statusThree == '' ? '加载中...' : statusThree}}</text>
			</view>
		</view>
		<view class="traceInfo">
			<view class="traceJf">{{jfCon}}</view>
			<view class="traceCon" :class="option != 1 && success == 1 ? 'succ' : ''">{{currTraceCon}}</view>
			<view class="traceBtn" @tap="goNextPage">{{btnTit}}</view>
		</view>
		<template v-if="!lineFlag">
			<view class="loadingTrace">
				<loading></loading>
			</view>
		</template>
		<template v-else>
			<view class="traceList" :class="[pathChiArr.length == 1 ? 'spec' : '']">
				<time-line v-if="pathChiArr != '' && lineFlag" ref="timeline" 
					:option="option" 
					:pathChiArr="pathChiArr"
					:pathNewArr="pathNewArr"
					:pathArr="pathArr" 
					:traceList="traceList" 
					location="center"
				>
				</time-line>
			</view>
		</template>
	</view>
</template>

<script>
	import timeLine from './components/xuan-timeLine.vue'
	import { getTracebackData } from '@/api/zhuxue'
	export default {
		components:{
			timeLine
		},
		data() {
			return {
				btnTit:'确定',
				time:0,
				isclick:true,
				loreId:0,
				studyLogId:0,
				traceList:{},
				pathArr:[],
				pathNewArr:[],
				pathChiArr:[],
				fromPage:'',//mapPage quePage studyPage
				option:-1,
				totalMoney:-1,
				success:-1,
				successStep:'',
				access:-1,
				currentloreName_study:'',
				nextLoreStep:'',
				statusOne:'',
				statusTwo:'',
				statusThree:'',
				nextLoreIdStr:'',
				jfCon:'',
				currTraceCon:'本知识点的"溯源路线图"如下,根据它能帮你找到不会的根源',
				lineFlag:false
			}
		},
		onLoad(options){
			this.loreId = options.loreId;
			this.studyLogId = options.studyLogId;
			this.fromPage = options.fromPage;
			this.loadTraceBackList()
		},
		onPageScroll() {
			if(this.isclick){
				this.timer();
				this.$refs.timeline.getScroll();
			}
		},
		methods: {
			goNextPage(){
				var delta = 1;//mapPage
				if(this.fromPage == 'quePage'){
					delta = 2;
				}else if(this.fromPage == 'studyPage'){
					delta = 3;
				}
				uni.navigateBack({delta})
			},
			loadTraceBackList(){
				var field = { account:uni.getStorageSync('token'),loreId:this.loreId,studyLogId:this.studyLogId };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				getTracebackData({content:contentStr}).then(res=>{
					var tmpRes = res.data.datas;
					this.traceList = tmpRes;
					//console.log(res)
					setTimeout(()=>{
						uni.setNavigationBarTitle({
							title:this.traceList.loreName
						})
					},100)
					this.option = tmpRes.option;
					this.totalMoney = tmpRes.totalMoney;
					this.success = tmpRes.success;
					this.successStep = tmpRes.successStep;
					this.access = tmpRes.access;
					this.currentloreName_study = tmpRes.currentloreName_study;
					this.nextLoreStep = tmpRes.nextLoreStep; 
					this.nextLoreIdStr = tmpRes.nextLoreIdArray;
					if(this.option != 1){//学习
						if(this.success == 6 || this.success == 5 || this.success == 3 || this.success == 2){
							this.statusOne = '已掌握';
							this.statusTwo = '将要学习';
							this.statusThree = '未学习';
						}else{
							this.statusOne = '已诊断';
							this.statusTwo = '将要诊断';
							this.statusThree = '未诊断';
						}
						this.pathArr = tmpRes.studyPath.split(":");
						this.pathChiArr = tmpRes.studyPathChi.split(":");
					}else{
						this.statusOne = '已诊断';
						this.statusTwo = '将要诊断';
						this.statusThree = '未诊断';
						this.pathArr = tmpRes.path.split(":");
						this.pathChiArr = tmpRes.pathChi.split(":");
					}
					//console.log(this.pathChiArr)
					var tmpArr = [];
					for(let i in this.pathArr){
						var tmpObj = {
							id:this.pathArr[i],
							noZdFlag : true,
							hasZdFlag : false,
							beingZdFlag:false
						};
						tmpArr.push(tmpObj);
						//将要诊断
						if(this.pathArr[i] == this.nextLoreIdStr){
							tmpArr[i].beingZdFlag = true;
							tmpArr[i].noZdFlag = false;
						}
					}
					this.pathNewArr = tmpArr;
					//console.log("================pathNewArr====================")
					//筛选出已诊断和未诊断
					for(let i in this.pathNewArr){
						if(this.pathNewArr[i].id != this.nextLoreIdStr){
							this.pathNewArr[i].hasZdFlag = true;
							this.pathNewArr[i].noZdFlag = false;
						}else{
							break;
						}
					}
					//console.log(this.pathNewArr)
					setTimeout(()=>{this.lineFlag = true;},500)
					this.renderTraceCon();
				}).catch(err=>{console.log(err)});
			},
			renderTraceCon(){
				if(this.option == 1){//诊断
					if(this.totalMoney != -1){
						if(this.success == 0){//本节题未做完或者未进行最后提交
							this.currTraceCon = this.successStep + '的针对性诊断还没有结束，点击继续诊断帮你检测出本知识点的掌握情况';
						}else if(this.success == 1){
							if(this.access == 0){//当前节点未全部做完
								this.currTraceCon = '学习要持之以恒，' + this.successStep + '诊断还未结束，点击确定继续诊断';
							}else{
								this.jfCon = '恭喜你完成任务，获得' + this.totalMoney + '积分奖励';
								this.currTraceCon = '通过诊断，您对' + this.successStep + '掌握的不是很好，需要启动溯源对下一级关联知识点进行诊断';
							}
						}else{
							this.currTraceCon = '很棒哦，这个知识点的诊断题全对了';
						}
					}
				}else{//学习
					if(this.success == 6){//全部正确，诊断学习结束
						this.currTraceCon = '当前知识点通过听“视频讲解”、看“点拨指导”、背“知识清单”、学“解题示范”、做“再次诊断”，你掌握的很棒';
					}else if(this.success == 5){//再次诊断全部做对 五步学习针对某个知识点学习后进行再次诊断然后全部正确
						this.currTraceCon = '当前知识点通过听“视频讲解”、看“点拨指导”、背“知识清单”、学“解题示范”、做“再次诊断”，你掌握的很棒！根据学习路线图学习下一个知识点吧！';
					}else if(this.success == 4){//五步学习完成，即将进入再次诊断  开始学习某一个知识点然后巩固训练全部做对 或者部分做对
						this.currTraceCon = '您已对' + this.currentloreName_study + '知识点学习完成，现在开始再次诊断吧';
					}else if(this.success == 3){
						this.currTraceCon = '很棒哦，这个知识点的'+ this.successStep +'全对了，跟着老师学习一下' + this.nextLoreStep + '吧';
					}else if(this.success == 2){//没通过，学习一下这些知识
						this.currTraceCon = '通过诊断，您对'+ this.successStep +'掌握的不是很好，跟着老师系统依次学习一下这些知识点吧';
					}else if(this.success == 1){//5步学习法通过
						this.currTraceCon = '恭喜您，完成任务，获得'+ this.totalMoney +'积分';
					}else if(this.success == 0){
						this.currTraceCon = '学习要持之以恒，'+ this.successStep +'再次诊断还未结束,继续学习直到掌握住';
					}
				}
			},
			timer(){
				if(this.time>0){
					this.isclick=false;
					this.time--;
					setTimeout(this.timer,1)
				}
				else{
					this.isclick=true;
					this.time=10
				}
			},
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
		margin-top: 90rpx;
	}
</style>
<style lang="scss" scoped>
	.loadingTrace{
		background: $pss-bg-primary;
		height: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.traceList{
		padding: 20rpx 30rpx;
		min-height: 200rpx;
		background: #fff;
		&.spec{
			min-height: 100rpx;
		}
	}
	.traceInfo{
		background: #fff;
		margin-bottom: 20rpx;
		@include respTo(phone){
			min-height: 180rpx;
			padding: 30rpx;
		}
		@include respTo(pad){
			min-height: 120rpx;
			padding: 20rpx;
		}
		.traceBtn{
			@include respTo(phone){
				width: 146rpx;
				height: 72rpx;
				line-height: 72rpx;
				font-size: $font-size30;
				border-radius: 15rpx;
			}
			@include respTo(pad){
				width: 110rpx;
				height: 48rpx;
				line-height: 48rpx;
				font-size:$padSize20;
				border-radius: 10rpx;
			}
			background: $pss-color-blue;
			text-align: center;
			margin: 20rpx auto 0;
			color: #fff;
		}
		.traceJf{
			color: $pss-color-blue;
			text-align: center;
			font-weight: bold;
			margin-bottom: 10rpx;
			@include respTo(phone){
				font-size:$font-size30;
			}
			@include respTo(pad){
				font-size:$padSize20;
			}
		}
		.traceCon{
			text-align: center;
			color: $pss-text-color3;
			@include respTo(phone){
				font-size:$font-size30;
			}
			@include respTo(pad){
				font-size:$padSize20;
			}
			.succ{
				color: $pss-color-blue;
			}
		}
	}
	.traceNav{
		width: 100%;
		height: 90rpx;
		background: #fff;
		position: fixed;
		left: 0;
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
		box-shadow: 0 5rpx 10rpx #eee;
		display: flex;
		z-index: 100;
		.navItem{
			width: 33.3%;
			line-height: 90rpx;
			text-align: center;
			color: $pss-text-color3;
			@include respTo(phone){
				font-size:$font-size32;
			}
			@include respTo(pad){
				font-size:$padSize22;
			}
			.icon-shoucangon{
				margin-right: 10rpx;
				@include respTo(phone){
					font-size:$font-size30;
				}
				@include respTo(pad){
					font-size:$padSize22;
				}
			}
			&.hasZd{
				color:#64ccf2;
			}
			&.beingZd{
				color:#fec812;
			}
			&.noZd{
				color: $pss-text-colora;
			}
		}
	}
</style>
